<template>
    <div class="tabs-content">
        <el-form
        :inline="true"
        style="display: flex; justify-content: space-between; align: center; margin: 0px 20px">
        <div style="display: inline-block">
          <el-form-item>
            <el-input v-model="querysysdata" placeholder="请输入查询时间"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="querySysLogByTime()">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="getsysdataList()">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-table
          ref="sysdataList"
          :data="sysdataList"
          border
          height="83%"
          style="width: 97.5%"
          :header-cell-style="{height: '7vh'}"
          :cell-style="cellStyle"
        >
          <!-- :index="getIndex" -->
          <el-table-column
              type="index"
              header-align="center"
              align="center"
              width="50"
              label="ID">
          </el-table-column>
          <el-table-column
              prop="name"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              label="系统文件名">
          </el-table-column>
          <el-table-column
              prop="createTime"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              label="创建时间">
          </el-table-column>
          <el-table-column
              prop="url"
              header-align="center"
              align="center"
              :show-overflow-tooltip="true"
              label="地址">
          </el-table-column>
          <el-table-column
              prop="fileSize"
              header-align="center"
              align="center"
              label="文件大小[单位:字节]">
          </el-table-column>
          <el-table-column
              align="center"
              label="操作">
              <template slot-scope="scope">
                <!-- <el-link type="primary" icon="el-icon-download" @click="download(scope)"></el-link> -->
                <el-button type="primary" @click="download(scope)" style="width:26%;height:3.5vh">下载</el-button>
              </template>
          </el-table-column>
        </el-table>
      <!-- 分页器 -->
      <div class="block">
        <el-pagination
          align="right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
import { getTime, getTimeHMS } from '../../utils/common'
export default {
  name: 'SysLog',
  data() {
    return {
      querysysdata: '', // 查询时间
      sysdataList: [], // 获取的登录日记数据
      currentPage: 1,
      pageSize: 10,
      total: 3
    }
  },
  mounted() {
    this.getsysdataList()
  },
  methods: {
    // 高级查询
    querySysLogByTime() {
      this.getRequest(`/sys/query?page=${this.currentPage}&size=${this.pageSize}&createTime=${this.querysysdata}`).then(resp => {
        if (resp) {
          this.opsdataList = resp.data.log
          this.total = resp.data.total
          this.$forceUpdate()
        } else {
          console.log('错误')
        }
      })
    },
    // 表格行高
    cellStyle() {
      return {
        height: '5vh',
        padding: '0'
      }
    },
    // 改变当前页行数
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
      this.getsysdataList()
    },
    // 改变当前页码
    handleCurrentChange(val) {
      this.currentPage = val
      this.getsysdataList()
    },
    // 获取系统日志选定页码的数据
    getsysdataList() {
      this.sysdataList.length = 0
      this.getRequest('/sys/' + this.currentPage + '/' + this.pageSize).then((resp) => {
        if (resp) {
          this.total = resp.total
          resp.list.forEach(item => {
            this.sysdataList.push({
              id: item.id,
              name: item.name,
              createTime: getTimeHMS(item.createTime),
              url: item.url,
              fileSize: item.fileSize
            })
          })
        }
      })
    },
    // 下载系统日志
    // }
    download(scope) {
      var a = document.createElement('a')
      a.setAttribute('href', scope.row.url)
      a.setAttribute('target', '_self')
      const clickEvent = document.createEvent('MouseEvents')
      clickEvent.initEvent('click', true, true)
      a.dispatchEvent(clickEvent)
    }
  },
  // 序号
  getIndex(index) {
    return index + (this.currentPage - 1) * this.pageSize + 1
  }
}
</script>

<style>
@import '../../assets/css/top-form.css';
@import '../../assets/css/table.css';
.tabs-content {
  width: 100%;
  height: 73vh;
}
/** 分页器 start  */
.tabs-content > .block {
  position: absolute;
  top: 90%;
  right: 1.5%;
}
.tabs-content .el-pagination {
  align-items: center;
}
.block .el-pagination /deep/ span:not([class*=suffix]) {
  font: 1vw '宋体';
  padding-top: 0px;
}
.block .el-pagination /deep/ .el-pagination__total {
  padding-top: 5px !important;
}
.block /deep/ .el-pagination .el-input__inner {
  font: 1vw '宋体';
}
/** 分页器 end */
</style>
